<script setup lang="ts">
import {ArrowLeft, ArrowRight, Delete, Edit, Search, Share} from "@element-plus/icons-vue";

const isLoading = ref(false);
</script>

<template>
  <div h-77vh flex flex-col>
    <el-card shadow="hover" flex flex-col>
      <template #header>
        <h3>按钮类型</h3>
      </template>
      <div>
        <el-space>
          <el-text size="large" type="primary" select-none>type:</el-text>
          <el-button @click="isLoading = !isLoading">加载切换</el-button>
          <el-button type="primary">primary</el-button>
          <el-button type="success">success</el-button>
          <el-button type="info">info</el-button>
          <el-button type="danger">danger</el-button>
          <el-button type="warning">warning</el-button>
          <el-button type="text">text(deprecated)</el-button>
        </el-space>
      </div>
      <div mt-3>
        <el-space>
          <el-text size="large" type="primary" select-none>other:</el-text>
          <el-button disabled>disabled</el-button>
          <el-button link>link</el-button>
          <el-button text>文字按钮</el-button>
          <el-button type="primary" :icon="Edit"/>
          <el-button type="primary" :icon="Search">Search</el-button>
          <el-button-group>
            <el-button type="primary" :icon="ArrowLeft">Pre</el-button>
            <el-button type="primary">
              Next
              <el-icon>
                <ArrowRight/>
              </el-icon>
            </el-button>
          </el-button-group>
          <el-button-group>
            <el-button type="primary" :icon="Edit"/>
            <el-button type="primary" :icon="Share"/>
            <el-button type="primary" :icon="Delete"/>
          </el-button-group>
          <el-button :loading="isLoading" type="primary">Loading</el-button>
          <el-button type="primary" tag="a" href="https://www.baidu.com/" target="_blank" rel="opener referrer">
            自定义元素标签a
          </el-button>
        </el-space>
      </div>
    </el-card>
    <el-card shadow="hover" mt-3>
      <template #header>
        <h3>按钮尺寸</h3>
      </template>
      <div class="flex flex-wrap items-center mb-4">
        <el-space>
          <el-button size="small">small</el-button>
          <el-button size="default">default</el-button>
          <el-button size="large">large</el-button>
        </el-space>
      </div>
    </el-card>
  </div>
</template>

<style scoped>

</style>